import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { AntDesign } from '@expo/vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();

const Home = ({navigation}) => {
	return (
		<View>
			<Text onPress={() => navigation.navigate('Login',{id:100,name:'张三'})}>首页</Text>
			
		</View>
	)
}

const Login = ({navigation,route}) => {
	useEffect(() => {
		navigation.setOptions({ 
			headerBackVisible:false,
			headerLeft:() => <AntDesign name="back" size={24} color="black" onPress={navigation.goBack} />,
			headerRight:() => <Text>😄🤗🙂</Text> 
		})
	},[])
	return (
		<View>
			<Text>登录</Text>
			<Text>{route.params.id}</Text>
			<Button title='返回' onPress={navigation.goBack} />
		</View>
	)
}

export default App = () => {
  return (
    <NavigationContainer>
		<Stack.Navigator screenOptions={{
			headerTitleAlign:'center',

		}}>
			<Stack.Screen 
				name='Home'
				component={Home}
				options={
					{
						title:'客户端',
						headerStyle:{
							backgroundColor:'#7e757f'
						},
						headerLeft:() => <Text>安雨木</Text>,
						headerRight:() => <AntDesign name="user" size={24} color="black" />
					}
				}
			/>
			<Stack.Screen 
				name='Login'
				component={Login}
				options={
					({route}) => ({
						title:route.params.name
					})
				}
			/>
		</Stack.Navigator>
	</NavigationContainer>
  );
}

const styles = StyleSheet.create({
  layout:{
    padding:20
  }
});
